<template>
  <view>
    <view class="p-3 bg-white flex align-center">
      <view class="face">
        <image :src="userinfo.face"></image>
      </view>
      <view class="flex flex-column ml-3">
        <view class="username font">{{ userinfo.username }}</view>
        <view class="integral text-muted">用户名：33333333333333333></view>
      </view>
    </view>
    <view class="mt-1 bg-white">
      <view class="flex justify-between align-center border-bottom mx-3 py-3">
        <view class="font">手机号码</view>
        <text class="text-muted font">{{ userinfo.phone }}</text>
      </view>
      <view class="flex justify-between align-center  mx-3 py-3" :class="{ 'border-bottom': index !== menuList.length - 1 }" v-for="(item, index) in menuList"
            :key="index" @click="toPage(item.url)">
        <view class="font">{{ item.title }}</view>
        <u-icon name="arrow-right"></u-icon>
      </view>
    </view>
<!--    退出登陆-->
    <view class="bg-white flex justify-center align-center mt-1">
      <text class="py-3 font">退出登陆</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userinfo: {},
      menuList: [
        {
          title: '用户协议',
          url: ''
        },
        {
          title: '隐私协议',
          url: ''
        },
        {
          title: '服务监督协议',
          url: ''
        },
        {
          title: '经营资质',
          url: ''
        },
        {
          title: '注销账户',
          url: ''
        },
      ],
    };
  },
  onLoad() {
    //加载
    this.init();
  },
  methods: {
    init() {
      //用户信息
      this.userinfo = {
        face: 'https://cx-img.zmn.cn/Image/user/4.jpg',
        username: "VIP会员10240",
        integral: "1435",
        phone: '150*****000'
      }
    },
    toPage(url){
      uni.navigateTo({
        url
      })
    }
  },
}
</script>

<style lang="scss">
page {
  background: #f5f5f7;
}


.face {
  flex-shrink: 0;
  width: 15vw;
  height: 15vw;

  image {
    width: 100%;
    height: 100%;
    border-radius: 100%
  }
}

.username {
  width: 100%;
}

.integral {
  display: flex;
  align-items: center;
  height: 40upx;
  border-radius: 20upx;
  font-size: 24upx
}
</style>
